<template>
  <view :data-theme="globPrimary">
    <u-navbar title="记笔记">
      <edu-button
        slot="right"
        class="header-btn"
        type="primary"
        size="mini"
        hover-class="none"
        :disabled="isEmpty"
        @click="addNote"
        >提交</edu-button
      >
    </u-navbar>
    <view class="note-wrapper"><u-input v-model="content" type="textarea" :maxlength="200" /></view>
    <view class="note-bottom">
      <u-checkbox v-model="checked" :active-color="globPrimaryColor">公开</u-checkbox>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      content: '',
      status: 1,
      params: {},
      checked: true,
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
  },
  watch: {
    checked() {
      if (this.checked) {
        this.status = 1
      } else {
        this.status = 0
      }
    },
  },
  onLoad(options) {
    this.params = {
      course_id: options.id ? options.id : 0,
      section_id: options.sid ? options.sid : 0,
      course_type: options.type ? options.type : 0,
    }
  },
  methods: {
    addNote() {
      if (this.$u.trim(this.content).length == 0) {
        this.$u.toast('内容不能为空')
        return
      }
      this.$edu.api
        .postCourseNote({
          ...this.params,
          content: this.content,
          open_status: this.status,
        })
        .then((res) => {
          this.$u.toast(res.msg)
          this.$u.route({
            type: 'navigateBack',
          })
        })
        .catch((res) => {
          this.$u.toast(res.msg)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.header-btn {
  font-size: 30rpx;
  font-weight: 400;
  margin-right: 30rpx;
  height: 56rpx;
  width: 100rpx;
  text-align: center;
  line-height: 56rpx;
}
.note-wrapper {
  padding: 30rpx;
  height: calc(100vh - 44px - 98rpx);
  background-color: #fff;
}
.note-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 98rpx;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
}
</style>
